<template>
  <div id="map-container"></div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: 'c9bee80370c375a44746e66bdab35868'
}
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'Map-Abroad',
  created() {
    AMapLoader.load({
      key: 'a775e1a0785d348dffff2ab444c8fdf1',
      version: '2.0',
      Loca: {
        version: '2.0'
      }
    }).then(AMap => {
      this.map = new AMap.Map('map-container', {
        zoom: 10,
        center: [2.17402, 48.51296],
        vectorMapForeign: 'style_zh_cn'
      })
      this.$emit('init', AMap, this.map)
    })
  },
  beforeCreate() {
    this.map && this.map.destroy()
  },
  beforeDestroy() {
    this.map && this.map.destroy()
  }
}
</script>

<style lang="scss" scoped>
#map-container {
  width: 100%;
  height: 100%;
}
</style>

<style lang="scss">
#map-container {
  .amap-copyright,
  .amap-logo {
    display: none !important;
  }

  .amap-marker-label {
    border: unset;
    background: unset;
    color: white;
    cursor: pointer;
  }
}
</style>
